<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:日志搜索组件
* @fileName:LogsSearch.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-6
!-->
<script setup lang="ts">
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
// 接受父组件传回
const props = defineProps({
  // 查询方法
  searchFunc: Function as any,
  // 日志事件下拉值
  eventData: Array,
  // 查询按钮动画
  isSearchLoading: {
    type: Boolean,
    default: false,
  },
});
// 定义日期值
const dateValue = ref("");
// 定义用户昵称值
const userValue = ref("");
// 定义事件选择值
const eventValue = ref("");

/**
 * 点击查询按钮
 * @reture viod
 */
const onSerarch = () => {
  if (dateValue.value === null) {
    dateValue.value = "";
  }
  // 组装查询参数
  let serachData = {
    nickName: userValue.value,
    beginTime:
      typeof dateValue.value[0] !== "undefined" ? dateValue.value[0] : "",
    endTime:
      typeof dateValue.value[1] !== "undefined" ? dateValue.value[1] : "",
    eventValue: eventValue.value,
  };
  props.searchFunc(serachData);
};
</script>

<template>
  <div class="page-search">
    <div class="page-title-words">日志管理</div>
    <!-- 用户昵称查询 -->
    <el-input
      class="page-search-userInput"
      v-model="userValue"
      clearable
      placeholder="请输入用户昵称"
      @keyup.enter.native="onSerarch"
    ></el-input>
    <!-- 日期查询 -->
    <div style="width: 350px; margin-right: 35px">
      <el-date-picker
        v-model="dateValue"
        format="YYYY/MM/DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="onSerarch"
      />
    </div>
    <!-- 事件选择 -->
    <el-select
      class="page-search-eventChoose"
      v-model="eventValue"
      clearable
      placeholder="请选择事件"
      size="large"
      @change="onSerarch"
    >
      <el-option
        v-for="item in props.eventData"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>
    <!-- 查询按钮 -->
    <el-button
      @click="onSerarch"
      :loading="props.isSearchLoading"
      :icon="Search"
      >查询</el-button
    >
  </div>
</template>

<style scoped lang="scss">
.page-search {
  :deep(.el-input__wrapper) {
    height: 30px;
    border-radius: 0;
    border: 0 !important;
    box-shadow: unset !important;
    background-color: #f2f2f6 !important;
  }
}
:deep(.el-date-editor--daterange) {
  border-radius: 0;
  background-color: #f2f2f6 !important;
  box-shadow: unset !important;
}
.page-search {
  display: flex;
  justify-content: flex-end;
  .page-title-words {
    font-size: 16px;
    color: #000;
    height: 30px;
    line-height: 30px;
    flex: 1;
  }
  .page-search-dateChoose {
    width: 170px;
  }
  .page-search-userInput {
    width: 170px;
    margin-left: 15px;
    margin-right: 15px;
  }
  .page-search-eventChoose {
    width: 170px;
    margin-right: 15px;
    height: 30px;
  }
  .el-button {
    width: 70px;
    border-radius: 0;
    background-color: #f2f2f6;
    color: #000;
    border: 0;
    &:hover {
      background-color: #5473e6;
      color: #fff;
    }
  }
}
</style>
